<template>
	<view>
		<view class="music_search">
			<uni-search-bar @input="inpSearch" clearButton="none" cancelButton="none"></uni-search-bar>
			<button @click="searchHandle" :disabled="isDisabled" type="primary" size="mini">搜索音乐</button>
		</view>
		<!-- 当点击搜索后，弹出推荐的音乐 -->
		<view class="music_tuijian" v-if="isSearch">
			<view class="divider"></view>
			<block v-for="(item, index) in list" :key="item.id">
				<view @click="musicHandle(item.id)">
					{{ index + 1 }}.{{ item.text }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		components: {uniIcons,uniSearchBar},
		data() {
			return {
				isDisabled: true,
				value: "",
				isSearch: false,
				list: [
					{
						id: 1,
						text: "动次打次"
					},
					{
						id: 2,
						text: "大家一起嗨起来"
					}
				]
			}
		},
		methods: {
			// 获取search框中得值
			inpSearch (event) {
				// console.log(event.value)
				this.value = event.value
				if (this.value.length === 0) {
					this.isDisabled = true
					this.isSearch = false
					return false
				}
				this.isDisabled = false
			},
			searchHandle () {
				this.isSearch = true
			},
			musicHandle (id) {
				uni.navigateTo({
					url: "../music_play/music_play?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.music_search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 12rpx;
		uni-search-bar {
			width: 550rpx;
			.uni-searchbar__box.data-v-1c400998 {
				justify-content: flex-start;
			}
		}
	}
	.music_tuijian {
		padding: 16rpx;
		.divider {
			height: 0;
			border: 2rpx solid #eee;
			margin: 10rpx 0;
		}
		view {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			border-bottom: 1px solid #ccc;
		}
	}
</style>
